<template>
  <div class="form-setting-panel">
    <h3>{{$t('common.form.systemWidget')}} -- {{field.displayName}}</h3>
    <p class="form-design-warning">{{$t('common.form.tip.systemTemplateTips')}}</p>
    <div class="form-setting-group">
      <el-checkbox :value="field.setting.phoneUnique" @input="update($event, 'phoneUnique', true)">{{$t('common.form.preview.text.des4')}}</el-checkbox>
    </div>
    <p class="form-select-logical-tip">{{$t('common.form.preview.text.des5')}}</p>

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <el-checkbox v-model="isFiltered" @input="showFilterCalls">{{$t('setting.common.userCard.title.phoneVerification')}}
          <el-tooltip  placement="top" :content="$t('setting.common.userCard.tip.tip3')">
            <i class="iconfont icon-question"></i>
          </el-tooltip>
        </el-checkbox>
      </div>
    </div>
    <!-- end 校验 -->
  </div>
</template>

<script>
import SettingMixin from '@src/component/form/mixin/setting';
import { settingProps } from '@src/component/form/components/props';

export default {
  name: 'customer-phone-extend-setting',
  mixins: [SettingMixin],
  props: settingProps,
  data() {
    return {
      isFiltered: this.field.setting.isFiltered || false
    }
  },
  methods: {
    updateForDom(event){
      let el = event.target;
      let prop = el.dataset.prop;
      let value = el.value;

      this.update(value, prop)
    },
    update(value, prop, isSetting){
      this.$emit('input', {value, prop, isSetting})
    },
    showFilterCalls(value) {
      this.update(value, 'isFiltered', true)
    }
  }

}
</script>
